<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport">
    <link rel="stylesheet" href="/asset/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">基本资料</div>
                <div class="layui-card-body">
                    <div class="layui-form" lay-filter="form">

                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名<span style="color: red">*</span></label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="username" autocomplete="off" lay-verify="required" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="nickname" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机号<span style="color: red">*</span></label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="phone" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱<span style="color: red">*</span></label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="email" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">年龄<span style="color: red">*</span></label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="age" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-inline">
                                <select name="sex">
                                    <option value="0">男</option>
                                    <option value="1">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">住址</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="address" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">真实姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="realName" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">身份证号<span style="color: red">*</span></label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="idCardNumber" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">账号状态</label>
                            <div class="layui-input-inline">
                                <input type="radio" name="status" value="0" title="正常" disabled>
                                <input type="radio" name="status" value="1" title="停用" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">部门</label>
                            <div class="layui-input-inline">
                                <div id="dept"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">岗位</label>
                            <div class="layui-input-inline">
                                <div id="post"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">角色</label>
                            <div class="layui-input-inline">
                                <div id="role"></div>
                            </div>
                        </div>

                        <div class="layui-form-item" style="text-align: center">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="update">确认修改</button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/asset/layui/layui.js"></script>
<script src="/my/fast.js"></script>
<script src="/asset/modules/xm-select.js"></script>
<script>
    // 接口地址
    let saveOrUpdate = UPMS_ADDRESS + '/sysUser/mySaveOrUpdate';
    let get = UPMS_ADDRESS + '/sysUser/get';

    let sysDept_deptTree2 = UPMS_ADDRESS + '/sysDept/deptTree2';

    let sysPost_listPosts = UPMS_ADDRESS + '/sysPost/listPosts';
    let sysUserPost_listPostIdsByUserId = UPMS_ADDRESS + '/sysUserPost/listPostIdsByUserId';

    let sysRole_listRoles = UPMS_ADDRESS + '/sysRole/listRoles';
    let sysUserRole_listRoleIdsByUserId = UPMS_ADDRESS + '/sysUserRole/listRoleIdsByUserId';

    layui.use(() => {
        let $ = layui.$;
        let form = layui.form;

        // 渲染部门下拉框
        let dept;
        let depts;
        xmSelectRender($, '#dept', 1, sysDept_deptTree2, 'post', (obj, data) => {
            dept = obj;
            depts = data;
        }, false, true);

        // 渲染岗位下拉框
        let post;
        let posts;
        xmSelectRender($, '#post', 0, sysPost_listPosts, 'get', (obj, data) => {
            post = obj;
            posts = data;
        }, false, true);

        // 渲染角色下拉框
        let role;
        let roles;
        xmSelectRender($, '#role', 0, sysRole_listRoles, 'get', (obj, data) => {
            role = obj;
            roles = data;
        }, false, true);

        // 更新时为表单赋值
        let id = getItemLocalStorage("userId");

        if (id) {
            $.get(get, {id: id}, rs => {
                if (rs.success) {
                    let data = rs.data;
                    // 为表单赋值
                    form.val('form', data);
                    // 监听表单提交--update
                    form.on('submit(update)', obj => {
                        layuiSubmitAsPostBody(saveOrUpdate, {...data, ...obj.field}, null, () => {
                            layer.msg('修改成功');
                            setTimeout(() => {
                                parent.location.reload();
                            }, 1000);
                        });
                    });

                    // 为部门下拉框动态赋值
                    if (depts) {
                        if (data.deptId) {
                            dept.append(data.deptId.split());
                        }
                    }
                    // 为岗位下拉框动态赋值
                    if (posts) {
                        $.get(sysUserPost_listPostIdsByUserId, {userId: id}, rs => {
                            if (rs.success) {
                                post.append(rs.data);
                            }
                        });
                    }
                    // 为角色下拉框动态赋值
                    if (roles) {
                        $.get(sysUserRole_listRoleIdsByUserId, {userId: id}, rs => {
                            if (rs.success) {
                                role.append(rs.data);
                            }
                        });
                    }
                }
            });
        }

    });
</script>
</body>
</html>
